﻿var SEPARATION = 100,
        AMOUNTX = 50,
        AMOUNTY = 50;

    var container;
    var camera, scene, renderer;

    var particles, particle, count = 0;

    var mouseX = 100,
        mouseY = -342;

    var windowHalfX = window.innerWidth*0.5 / 2;
    var windowHalfY = 620 / 2;

    init();
    animate();

    function init() {

        container = document.createElement('div');
        container.setAttribute("id","index_canvas"); 
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 1000;

        scene = new THREE.Scene();

        particles = new Array();

        var PI2 = Math.PI * 2;
        var material = new THREE.ParticleCanvasMaterial({

            color: 0xe1e1e1,
            program: function(context) {

                context.beginPath();
                context.arc(0, 0, .5, 0, PI2, true);
                context.fill();

            }

        });

        var i = 0;

        for (var ix = 0; ix < AMOUNTX; ix++) {

            for (var iy = 0; iy < AMOUNTY; iy++) {

                particle = particles[i++] = new THREE.Particle(material);
                particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
                particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
                scene.add(particle);

            }

        }

        renderer = new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, 620);
        container.appendChild(renderer.domElement);

        window.addEventListener('resize', onWindowResize, false);

    }

    function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY =620 / 2;

        camera.aspect = window.innerWidth / 620;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, 620);

    }

    function animate() {

        requestAnimationFrame(animate);

        render();
    }

    function render() {

        camera.position.x += (mouseX - camera.position.x) * .05;
        camera.position.y += (-mouseY - camera.position.y) * .05;
        camera.lookAt(scene.position);

        var i = 0;

        for ( var ix = 0; ix < AMOUNTX; ix ++ ) {

                    for ( var iy = 0; iy < AMOUNTY; iy ++ ) {

                        particle = particles[ i++ ];
                        particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
                            ( Math.sin( ( iy + count ) * 0.5 ) * 50 );
                        particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 4 +
                            ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4;

                    }

                }

        renderer.render(scene, camera);

        count += 0.1;

    }
